<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okText="$t('保存')"
    :confirmLoading="confirmLoading"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    :cancelText="$t('关闭')"
  >
    <a-form-model ref="form" :model="model" :rules="validatorRules" class="cus-form">
      <div style="margin: 0 30px;">
        <div style="line-height: 40px; font-weight: 700">{{ $t('基本信息') }}</div>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item :label="$t('排序序号')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">
              <a-input-number v-model="model.sort" :placeholder="$t('请输入排序序号')" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('类型名称')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" :placeholder="$t('请输入类型名称')"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('类型编码')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
              <a-input v-model="model.code" :placeholder="$t('请输入类型编码')"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="manageState">
              <span slot="label">
                {{ $t('管理状态') }}
                <a-tooltip :title="$t('停用后的会员类型将不再支持晋级到该会员。')">
                  <a-icon type="question-circle-o" />
                </a-tooltip>
              </span>
              <j-switch v-model="model.manageState"></j-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item :labelCol="labelCol2" :wrapperCol="wrapperCol2" prop="forCard">
              <span slot="label">
                {{ $t('会员开卡') }}
                <a-tooltip :title="$t('不允许开卡的会员类型在吧台或手持机的会员开卡或开卡充值中将不再显示。')">
                  <a-icon type="question-circle-o" />
                </a-tooltip>
              </span>
              <a-switch v-model="model.forCard"></a-switch>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('开卡必填')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-checkbox v-model="model.needCertNo">{{ $t('证件号') }}</a-checkbox>
              <a-checkbox v-model="model.needPhone">{{ $t('手机号') }}</a-checkbox>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('首次取卡费')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="firstFee">
              <a-input-number v-model="model.firstFee" :placeholder="$t('请输入首次取卡费')" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('再次取卡费')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="againFee">
              <a-input-number v-model="model.againFee" :placeholder="$t('请输入再次取卡费')" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('换卡费')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="changeFee">
              <a-input-number v-model="model.changeFee" :placeholder="$t('请输入换卡费')" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :label="$t('晋级成长值')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number
                v-model="model.promoteGrowth"
                :placeholder="$t('请输入晋级成长值')"
                style="width: 100%"
                :disabled="!autoPromote"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('说明')" :labelCol="labelCol1" :wrapperCol="wrapperCol1" prop="commet">
              <a-input v-model="model.commet" :placeholder="$t('请输入说明')" />
            </a-form-model-item>
            <a-form-model-item :label="$t('有效期')" :labelCol="labelCol1" :wrapperCol="wrapperCol1" required>
              <a-radio-group v-model="model.validityType">
                <div style="margin-top: 10px; margin-bottom: 10px">
                  <a-radio value="0">{{ $t('不限期') }}</a-radio>
                </div>
                <div>
                  <a-radio value="1">{{ $t('指定日期') }}：</a-radio>
                  <j-date
                    :disabled="model.validityType != '1'"
                    v-model="model.startDate"
                    :placeholder="$t('请选择日期')"
                    style="width: 140px"
                  ></j-date>
                  ~
                  <j-date
                    :disabled="model.validityType != '1'"
                    v-model="model.endDate"
                    :placeholder="$t('请选择日期')"
                    style="width: 140px"
                  ></j-date>
                </div>
                <div style="margin-top: 20px">
                  <a-radio value="2">{{ $t('指定天数') }}：</a-radio>
                  <i18n path="valid-period2" tag="span">
                    <a-input-number
                      place="startDays"
                      v-model="model.startDays"
                      style="width: 64px; margin: 0 4px"
                      :disabled="model.validityType != '2'"
                      :min="0"
                    />
                    <a-input-number
                      place="validDays"
                      v-model="model.validDays"
                      style="width: 64px; margin: 0 4px"
                      :disabled="model.validityType != '2'"
                      :min="0"
                    />
                  </i18n>
                </div>
                <div style="margin-top: 10px" :span="24" v-if="model.validityType == '2'">
                  <a-form-model-item :label="$t('动态有效期')" :labelCol="labelCol1" :wrapperCol="wrapperCol" required>
                    <a-checkbox :checked="model.validFlag == 1" @change="changeState">{{$t('启用')}}</a-checkbox>
                    <span style="color: orange">{{$t("该功能仅在有效期设定为指定天数时有效；会员有效期随消费动态变化，实际有效期为最后一次消费时间+设定的有效天数")}}</span>
                  </a-form-model-item>
                </div>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
      </div>
    </a-form-model>
  </j-modal>
</template>

<script>
import { isEmpty1 } from '@/api/comm'
import { isEmpty, httpAction, getAction } from '@/api/manage'

export default {
  name: 'MemberRuleModal',
  components: {},
  data() {
    return {
      title: '',
      width: 1200,
      visible: false,
      disableSubmit: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol1: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol1: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 17 },
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      confirmLoading: false,
      model: {
        firstFee: 10,
        againFee: 10,
        changeFee: 10,
        manageState: 'Y',
        validityType: '0',
        needCertNo: false,
        needPhone: false,
        validFlag:0 ,
        forCard: true
      },
      autoPromote: false,
      validatorRules: {
        name: [{ required: true, message: this.$t('请输入类型名称') }],
        manageState: [{ required: true, message: this.$t('请输入管理状态') }],
        forCard: [{ required: true, message: this.$t('请输入') }],
        code: [{ required: true, message: this.$t('请输入类型编码') }],
        firstFee: [{ required: true, message: this.$t('请输入首次取卡费') }],
        againFee: [{ required: true, message: this.$t('请输入再次取卡费') }],
        changeFee: [{ required: true, message: this.$t('请输入换卡费') }],
      },
      url: {
        add: '/member/bisMemberRule/add',
        edit: '/member/bisMemberRule/edit',
        queryById: '/member/bisMemberRule/queryById',
      },
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    add() {
      this.visible = true
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.visible = true
      this.model = Object.assign({}, record)
    },
    changeState(e){
      let that = this;
      that.$set(that.model, 'validFlag', e.target.checked ? 1 : 0)
      that.confirmLoading = true;
      let httpurl = '';
      let method = '';
      if(!that.model.id){
        httpurl+=that.url.add;
        method = 'post';
      }else{
        httpurl+=that.url.edit;
          method = 'put';
      }
      httpAction(httpurl,that.model,method).then((res)=>{
        if(res.success){
          that.$message.success(res.message);
          that.$emit('ok');
        }else{
          that.$message.warning(res.message);
        }
      }).finally(() => {
        that.confirmLoading = false;
      })
    },
    handleOk() {
      let that = this
      // 触发表单验证
      that.$refs.form.validate((valid) => {
        if (valid) {
          let httpurl = ''
          let method = ''
          if (that.model.validityType === '1' && (isEmpty(that.model.startDate) || isEmpty(that.model.endDate))) {
            that.$message.warn(that.$t('请选择指定日期'))
            return
          }
          if (that.model.validityType === '2' && (isEmpty1(that.model.startDays) || isEmpty(that.model.validDays))) {
            that.$message.warn(that.$t('请输入指定天数'))
            return
          }
          that.confirmLoading = true
          if (!that.model.id) {
            httpurl += that.url.add
            method = 'post'
          } else {
            httpurl += that.url.edit
            method = 'put'
          }
          let query = Object.assign({}, that.model)
          httpAction(httpurl, query, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                that.close()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    close() {
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>

<style>
.cus0-label::after{
  content: ':';
  position: relative;
  top: -0.5px;
  margin: 0 0 0 2px;
}
</style>